<template>
    <div id="show">
        <template>
            <div style="margin-top: 30px">
                <el-button @click="addShow()">创建</el-button>
                <el-button @click="deleteList()">删除</el-button>
            </div>

            <el-table
                    ref="multipleTable"
                    :data="ShowSimpleVO"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleCurrentChange">

                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        label="索引"
                        width="60">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>

                <el-table-column
                        prop="img"
                        label="图片"
                        width="200"
                        show-overflow-tooltip>

                    <template slot-scope="scope">
                        <!--scope.row代表当前遍历的数组中的对象-->
                        <el-image
                                style="width: 100px; height: 100px"
                                :src="'http://176.17.10.223:18083/' + scope.row.img"
                        ></el-image>

                    </template>
                </el-table-column>

            </el-table>
        </template>
    </div>
</template>

<style>

    .el-table .el-table__cell {
        text-align: center;
    }

</style>

<script>

    export default {

        data() {
            return {
                ShowSimpleVO: [],

                MultiSelect:[]
            }
        },
        created() {
            this.getData();
        },
        methods: {
            getData(){
                //获取全部数据
                this.axios.post("http://176.17.10.223:18083/show/selectList").then( (response) =>{
                    this.ShowSimpleVO = response.data.data;
                })
            },

            deleteList(){
                console.log("deleteList")
                let vals = this.MultiSelect;
                console.log(vals)
                vals.forEach(val => {
                    console.log("val.id=============="+ val.id)
                    this.deleteInformation(null,val)
                })
                // 重置选中
                this.MultiSelect = null;
            },
            // 记录选择的数据
            handleCurrentChange(vals) {
                this.MultiSelect = vals;
            },

            // 删除选中的数据
            deleteInformation(index,row){
                let url = 'http://176.17.10.223:18083/show/deleteById';
                let data = 'id='+ row.id;
                console.log(row.id)
                console.log("请求路径: " + url);
                console.log("请求数据: " + data);
                this.axios.post(url,data).then((response) => {
                    /*
                    实现局部刷新
                     */
                    this.ShowSimpleVO.splice(index,1);

                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                })
                    .catch(function (error) {
                        console.log(error);
                    });
            },

            addShow(){
                console.log("ShowAdd")
                this.$router.push({path: '/admin/manage/ShowAdd'})//路由刷新
            }



        }
    }




</script>